<template>
    <div>
        <el-form v-if="displayType=='add'" :model="newDetails" :rules="rules" ref="addForm" class="infoInput" label-width="110px">
            <el-form-item label="字典标签名" prop="dictLabel">
                <el-input v-model="newDetails.dictLabel"></el-input>
            </el-form-item>
            <el-form-item label="字典标签值" prop="dictValue">
                <el-input v-model="newDetails.dictValue"></el-input>
            </el-form-item>
            <el-form-item label="列表回显样式">
                <el-select v-model="newDetails.listClass" style="width:90%" placeholder="请选择样式">
                    <el-option label="默认(deafult)" value="deafult"></el-option>
                    <el-option label="主要(primary)" value="primary"></el-option>
                    <el-option label="成功(success)" value="success"></el-option>
                    <el-option label="警告(warning)" value="warning"></el-option>
                    <el-option label="危险(danger)" value="danger"></el-option>
                    <el-option label="信息(info)" value="beijing"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="显示顺序" prop="sort">
                <el-input-number v-model="newDetails.sort" style="width:90%" size="medium" controls-position="right" :min="1" :max="300"></el-input-number>
            </el-form-item>
            <el-form-item label="状态">
                <el-radio-group v-model="newDetails.status">
                <el-radio label="启用"></el-radio>
                <el-radio label="停用"></el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="备注" prop="remark">
                <el-input type="textarea" style="width:90%" v-model="newDetails.remark"></el-input>
            </el-form-item>
            <div class="inlineBtn">
                <el-button type="primary" size="medium" @click="addSubmit">提交</el-button>
                <el-button size="medium"  @click="noUpdate">取消</el-button>
            </div>
        </el-form>
        <el-form v-if="displayType=='edit'" :model="detailsInfo" :rules="rules" ref="editForm" class="infoInput" label-width="110px">
            <el-form-item label="字典标签名" prop="dictLabel">
                <el-input v-model="detailsInfo.dictLabel"></el-input>
            </el-form-item>
            <el-form-item label="字典标签值" prop="dictValue">
                <el-input v-model="detailsInfo.dictValue"></el-input>
            </el-form-item>
            <el-form-item label="列表回显样式">
                <el-select v-model="detailsInfo.listClass" style="width:90%" placeholder="请选择样式">
                    <el-option label="默认(deafult)" value="deafult"></el-option>
                    <el-option label="主要(primary)" value="primary"></el-option>
                    <el-option label="成功(success)" value="success"></el-option>
                    <el-option label="警告(warning)" value="warning"></el-option>
                    <el-option label="危险(danger)" value="danger"></el-option>
                    <el-option label="信息(info)" value="info"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="显示顺序" prop="sort">
                <el-input-number v-model="detailsInfo.sort" style="width:90%" size="medium" controls-position="right" :min="1" :max="300"></el-input-number>
            </el-form-item>
            <el-form-item label="状态">
                <el-radio-group v-model="detailsInfo.status">
                <el-radio label="启用"></el-radio>
                <el-radio label="停用"></el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="备注" prop="remark">
                <el-input type="textarea" style="width:90%" v-model="detailsInfo.remark"></el-input>
            </el-form-item>
            <div class="inlineBtn">
                <el-button type="primary" size="medium" @click="updateSubmit">提交</el-button>
                <el-button size="medium"  @click="noUpdate">取消</el-button>
            </div>
        </el-form>
    </div>
</template>

<script>
  export default {
    data() {
        var validateLabel = (rule, value, callback) => {
            console.log(value);
            if(!this.sa.isNotNull(value)){
                callback(new Error('标签名不能为空'));
            }else{
                callback();
            }
        };
        var validateValue = (rule, value, callback) => {
            if(!this.sa.isNotNull(value)){
                callback(new Error('标签值不能为空'));
            }else{
                callback();
            }
        };
        return {
            newDetails: {
                status:'启用',
                listClass:'deafult',
                sort:1
            },
            //表单校验规则
            rules:{
                dictLabel: [
                    { required: true, message: '请输入标签名', trigger: 'blur' },
                    { validator: validateLabel, trigger: 'blur'}
                ],
                dictValue: [
                    { required: true, message: '请输入标签值', trigger: 'blur' },
                    { validator: validateValue, trigger: 'blur'}
                ],
                remark:[
                    { min: 0, max: 20, message: '长度在 0 到 20 个字符', trigger: 'blur' },
                ],
            },
            detailsInfo:JSON.parse(this.details)
        }
    },
    props:['details','displayType'],
    methods: {
        //新增提交
        addSubmit() {
            if(!this.checkForm('addForm')){
                return
            }
            console.log(this.newDetails);
            let params=this.newDetails;
            this.request('',params).then(res=>{
              if(!res){return}
              this.$bus.$emit("addDictDetailCallback")
            })
        },
        //修改提交
        updateSubmit(){
            console.log(this.detailsInfo);
            if(!this.checkForm('editForm')){
                return
            }
            let params=this.detailsInfo;
            this.request('',params).then(res=>{
              if(!res){return}
              this.$bus.$emit("updateDictDetailCallback")
            })
        },
        //表单提交前置校验
        checkForm(formName){
            let flag;
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    flag=true;
                    return true;
                } else {
                    flag=false
                    return false;
                }
            });
            return flag
        },
        //取消修改
        noUpdate(){
            this.$bus.$emit("noUpdate")
        }
    },
    mounted(){
        if(this.displayType=="add"){
            this.newDetails.dictId=this.detailsInfo.dictId
        }
    }
  }
</script>

<style>
/*表单input框样式控制 */
.infoInput >div>div>div>input{
  width:90%;
}
/*修改页按钮 */
.inlineBtn {
    text-align:center
}
</style>